<template>
    <div id="nav">
        <ul class="nav">
            <li v-for="(item,index) in navList" @click="navClick(index)" :class="{navitemactive:activeIndex==index}">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "nav1",
        data(){
            return{
                navList:['个人信息','学术成果 '],
                activeIndex:0,
            }
        },
        methods:{
            navClick(index){
                this.activeIndex=index
                this.$emit('navClick',index)
            }
        }
    }
</script>

<style scoped>
    #nav{
        width: 100%;
        height: 70px;
        background: #0A54B3;
    }
    .nav{
        width: 1248px;
        height: 60px;
        background: #0A54B3;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
    }
    .nav li{
        list-style: none;
        line-height: 60px;
        color: #fff;
        font-size: 15px;
        font-weight: bolder;
        cursor: pointer;
    }
    .navitemactive{
        border-bottom: 4px solid #ffe400;
    }
</style>